<script setup>
  import { computed } from 'vue'
  const emit = defineEmits(['leftClick'])
  const props = defineProps({
    // 标题
    title: String,
    // 是否有底部边框
    border: {
      type: Boolean,
      default: false
    },
    // 是否展示左侧箭头
    showLeftArrow: {
      type: Boolean,
      default: true
    },
    bgColor: {
      type: String,
      default: '#fff'
    }
  })
  // 返回上一页
  const onBack = () => {
    const pages = getCurrentPages()
    if (pages.length > 1) {
      uni.navigateBack()
    }
  }

  // 左侧点击事件
  const onClick = (e) => {
    emit('leftClick', e)
  }

  const navbarStyle = computed(() => {
    return {
      [props.bgImage ? 'background-image' : 'background-color']: props.bgImage || props.bgColor
    }
  })
</script>
<template>
  <view
    class="bit-nav-bar"
    :style="navbarStyle"
    :class="{ 'b-b': props.border }"
  >
    <view class="main">
      <view
        class="left"
        @click="onClick"
      >
        <slot name="left">
          <bit-icon
            color="dark"
            v-if="props.showLeftArrow"
            @click="onBack"
            >&#xe716;</bit-icon
          >
        </slot>
      </view>
      <view class="title">{{ props.title }}</view>
      <view class="right"></view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  @import '@/styles/variable.scss';
  .bit-nav-bar {
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    align-items: flex-end;
    height: 176rpx;
    .main {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      width: 100vw;
      height: 88rpx;
      .left,
      .title,
      .right {
        box-sizing: border-box;
        flex: 1;
      }
      .left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 30rpx;
        font-size: var(--font-size-md);
        font-weight: 400;
      }
      .title {
        text-align: center;
        font-weight: 600;
        font-size: var(--font-size-lg);
      }
    }
  }
</style>
